<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header/>
    <!-- Page content -->
    <main class="grow">
      <!-- Banner -->
      <ServicesBanner :params="bannerParams"/>
      <CompanyOverview class="scroll-mt-[96px]" id="overview"/>
      <StatsCard class="mt-16"/>
      <OurAdvantage class="mt-24 scroll-mt-[96px]" id="advantage"/>
      <TrustedCompanies class="scroll-mt-[96px]" id="trusted"/>
      <TheMoldFactory class="mt-16 scroll-mt-[96px]" id="factory"/>
    </main>
    <!-- Site footer -->
    <Footer/>
  </div>
</template>

<script setup>
import Header from "../components/common/Header.vue";
import Footer from "/src/components/common/Footer.vue";
import ServicesBanner from "../components/ServicesBanner.vue";
import OurAdvantage from "../components/Home/OurAdvantage.vue";
import StatsCard from "../components/common/StatsCard.vue";
import CompanyOverview from "../components/AboutUs/CompanyOverview.vue";
import TrustedCompanies from "../components/Home/TrustedCompanies.vue";
import TheMoldFactory from "../components/AboutUs/TheMoldFactory.vue";

import banner from "/src/images/banner-about-us.webp";


const bannerParams = {
  title: "About Us",
  imgUrl: banner,
}

</script>

<style>
</style>